import React from 'react'
import { changeNav } from '../../../actions'
import { connect } from 'react-redux'
import {
    Button, List, InputItem, Flex, WingBlank, WhiteSpace, Popup, Tag, Toast, Switch, Icon, Tabs, Badge
} from 'antd-mobile'
import { createForm } from 'rc-form';
import styles from '../wxelm/alreadyOpenTenant.less';
import { ajaxGet, ajaxPost } from 'wxAjaxUtil';
import hhistory from '../../../history';
import { wmConfig } from '../../../actions/elm.js'

const TabPane = Tabs.TabPane;
const Item = List.Item;
const Brief = Item.Brief;
const postData = {
    "searchParam": "",
    "page": 1,
    "limit": 10
};

class AlreadyOpenTenant extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            resmd: [],
            resjt: []
        };
        this.toMdConfig = this.toMdConfig.bind(this);
        this.toJtConfig = this.toJtConfig.bind(this);
    }
    componentDidMount() {
        this.props.tochangeNav({
            title: "餐道外卖已开通商户", rbtn: [
                <Icon type={'search'} />
            ]
        });
        //请求门店数据
        ajaxPost("/o2o/sly/list/cdwm", postData, 'wxApiPath').then(res => {
            if (res.returnCode && res.returnCode == "1") {
                this.setState({
                    resmd: res.data.detail,
                });
            } else {
                Toast.fail('获取已开通商户门店失败', 1);
            }
        });
        //请求集团数据
        ajaxPost("/o2o/sly/list/cdwmgp", postData, 'wxApiPath').then(res => {
            if (res.returnCode && res.returnCode == "1") {
                this.setState({
                    resjt: res.data.detail,
                });
            } else {
                Toast.fail('获取已开通商户集团失败', 1);
            }
        });
    }

    toMdConfig(i) {
        var storeCode = {
            storeCode: this.state.resmd[i].storeCode
        };
        hhistory.push({ pathname: '/cdAOpenMdConfig', state: { backRouter: '/cdAOpen',storeCode:storeCode } })
    }

    toJtConfig(i) {
        var groupCode = {
            groupCode: this.state.resjt[i].groupCode
        };
        hhistory.push({ pathname: '/cdAOpenJtConfig', state: { backRouter: '/cdAOpen',groupCode:groupCode } })
    }

    render() {

        return (
            <div>
                <Tabs defaultActiveKey="1">
                    <TabPane tab={<Badge><span style={{ fontSize: "0.4rem" }}>门店</span></Badge>} key="1">
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>

                            <div className={styles.div}>
                                {this.state.resmd.map((item, index) => {
                                    return (
                                        <div key={index}>
                                            <Item thumb={item.storeLogo} extra={<button onClick={() => this.toMdConfig(index)} className={styles.btn} type="button">餐道外卖</button>}>
                                                {item.storeName}<Brief>{item.storeCode}</Brief>
                                            </Item>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    </TabPane>
                    <TabPane tab={<Badge><span style={{ fontSize: "0.4rem" }}>集团</span></Badge>} key="2">
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>

                            <div className={styles.div}>
                                {this.state.resjt.map((item, index) => {
                                    return (
                                        <div key={index}>
                                            <Item thumb={item.groupLogo} extra={<button onClick={() => this.toJtConfig(index)} className={styles.btn} type="button">餐道外卖</button>}>
                                                {item.groupName}<Brief>{item.groupCode}</Brief>
                                            </Item>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }


}

const mapStateToProps = (state) => ({

})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav: navogj => dispatch(changeNav(navogj)),
    wmConfig: storeCode => dispatch(wmConfig(storeCode))
})

export default connect(mapStateToProps, mapDispatchToProps)(AlreadyOpenTenant)